/* CSS Document 
Author Name: Anvesh Nandagiri
Author email: nandagirianvesh143@gmail.com
Creation Date: 31st August, 2019.
Description: A default stylesheet for Arial Engineering Services : Developed By ANVESH NANDAGIRI.
 ====== TABLE OF CONTENT  ======== 
PRELOADER CSS | TOP HEADER CSS | NAVBAR CSS | PROGRESS BAR CSS | SERVICES PAGES CSS | BRANDS CSS | FOOTER CSS | BACK TO TOP CSS */


/*   =============================================== SERVICES PAGE CSS BEGINS =========================================================  */
/* ===== SERVICES BG ========== */
.services-page-bg{background: url('./pictures/services/services-page.jpg') no-repeat center; background-size:cover;background-color:#fff;width:100%;height:600px;margin:0 auto;padding:0;}
.services-page-caption{top:35%;}
.services-page-caption h1{font-family:Raleway;color:#f7f9fb;}
.services-page-end{color:gold;}
/* ===== BREADCRUMBS ========== */
ul.service-crumb {list-style:none;color:gold;background-color:transparent;}
ul.service-crumb li {font-size: 16px;}
ul.service-crumb li+li:before {color: #fff; content: "|\00a0";}
ul.service-crumb li a { color: #fff; }
ul.service-crumb li a:hover {color:gold;text-decoration:underline;}
/* ===== SERVICES IMAGE & TEXT ==== */
.our-services-img{animation:service-page 2s alternate infinite;}@keyframes service-page{from{transform:translate(-20px)}to{transform:translate(20px)}}
.our-services-text p{font-family:Roboto;font-size:15px;color:#888;}
.our-services-end{color:#000;font-size:16px;}
/* ===== SERVICES TYPES & INFO ==== */
.services-types{background-color:#fcfcfc;}
.dd-main{background:#f1f1f1;}
.dd-sub-text{margin:100px 0 0 -350px; background-color:#fff;border:5px solid gold;}
.dd-sub-text h4{font-family:Raleway;color:#222;}
.dd-sub-text h4:after{content:"";position:absolute;left:0;top:100%;width:50px;height:2px;background-color:#ccc;transition:width .5s ease-in-out;}
.dd-sub-text h4:hover:after{width:100%;}
.dd-sub-text p{font-family:Raleway;font-size:15px;color:#000;}
.dd-sub-text a{border-radius:25px 25px;background-color:gold;border:none;color:#000;font-size:15px;width:130px;cursor:pointer;margin-top:30px;transition: all 0.5s;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-ms-transition: all 0.5s;-o-transition: all 0.5s;}
.dd-sub-text a .arrow{cursor: pointer;transition:0.5s;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-ms-transition:all 0.5s;-o-transition:all 0.5s;}
.dd-sub-text a .arrow:after{content: '\00bb';position: relative;opacity: 0;top: 0;right: -20px;transition: 0.5s;-webkit-transition: 0.5s;-moz-transition: 0.5s;-ms-transition: 0.5s;-o-transition: 0.5s;}
.dd-sub-text a:hover .arrow{padding-right: 10px;}
.dd-sub-text a:hover .arrow:after{opacity:1;right:0;}
.dd-sub-text a:focus{outline:0 !important; box-shadow:none;}


/* ======================= Designing & Drafting Page Begins ====================================== */
.dd-bg{background: url('./pictures/services/dd-bg.jpg') no-repeat center; background-size:cover;background-color:#fff;width:100%;height:600px;margin:0 auto;padding:0;}
.dd-caption{top:30%;}
.dd-caption h1{font-family:Raleway;color:#1a709b;}
.dd-head{color:#666;font-size:24px;}
/* ======== BREADCRUMBS ========== */
ul.dd-crumb {list-style:none;color:#1a709b;background-color:transparent;}
ul.dd-crumb li {font-size: 16px;}
ul.dd-crumb li+li:before {color: #000; content: "|\00a0";}
ul.dd-crumb li a{ color: #000;}
ul.dd-crumb li a:hover {color:#1a709b;text-decoration:underline;}
.ddMain{width:100%;height:auto;display:block;}
.ddHead h4{font-family:Raleway;color:#000;}
.ddHead p{font-family:Roboto;font-size:15px;color:#666;}
.fa-dd{font-size:50px;color:#1a709b;}
.fa-dd:hover{color:rgba(0,125,0,0.8);transition:all .8s ease;-webkit-transition:all .8s ease;-moz-transition:all .8s ease;-ms-transition:all .8s ease;-o-transition:all .8s ease;transform:rotate(20deg);}

/* ========================== Installations Page Begins ================================================= */
/* =========== Installation BG ============= */
.install-bg{background: url('./pictures/services/install-bg.jpg') no-repeat center; background-size:cover;background-color:#fff;width:100%;height:600px;margin:0 auto;padding:0;}
.install-caption{top:30%;}
.install-caption h1{font-family:Raleway;color:#56c6ff;}
.install-end{color:#f7f9f7;font-size:24px;}
/* ======== BREADCRUMBS ========== */
ul.install-crumb {list-style:none;color:#56c6ff;background-color:transparent;}
ul.install-crumb li {font-size: 16px;}
ul.install-crumb li+li:before {color: #eee; content: "|\00a0";}
ul.install-crumb li a{ color: #eee;}
ul.install-crumb li a:hover {color:#56c6ff;text-decoration:underline;}
/* ==== Installation Process ===== */
.installP{background-color:#fff; margin-top:-140px;}
.installP p{background:url('../pictures/services/shadow.png') no-repeat center 0; font-size:15px; font-family:Poppins; color:#888;}
.fa-install,.fa-install2,.fa-install3{ width:70px; height:70px; font-size:35px; background-color:#56c6ff; color:#fff; border-radius:50%;}
.fa-install:hover,.fa-install2:hover,.fa-install3:hover{background-color:#fff; color:#000; border:1px solid #eee;}
.fa-install{animation:bounce 2s alternate infinite;}
@keyframes bounce { 0%  { transform: translateY(0); } 50%  { transform: translateY(25px); } 100% { transform: translateY(0); } }
.fa-install2{animation:bounce2 2s alternate infinite;}
@keyframes bounce2 {0%   { transform: translateY(25px); }50%  { transform: translateY(-15px); }100% { transform: translateY(0); }}
.fa-install3{animation:bounce3 2s alternate infinite;}
@keyframes bounce3 {0%   { transform: translateY(0); }50%  { transform: translateY(25px); }100% { transform: translateY(0); }}
/* ==== About Installation  ===== */
.about-install p{font-family:Roboto;font-size:17px;color:#888;line-height:1.5em;}
.install-aes{color:#000;}
/* ==== Installation Procedure/Steps  ===== */
.install-pro h3{font-family:Poppins;color:#56c6ff;letter-spacing:.5px;}
.install-pro p{font-size:15.5px;color:#777;letter-spacing:.3px;line-height:1.7em;}
.install-steps{background:#f7f9fb;}
.install-steps p{font-family:Poppins;font-size:16px;color:#555;}
/* ==== Text Section and Moto  ===== */
.text-section p{font-family:Raleway;font-size:17px;color:#333;letter-spacing:.2px;line-height:1.7em;}
.our-moto p{font-family:Poppins;font-size:30px;letter-spacing:1px;}
.moto-text{color:#56c6ff;}
.fa-moto{color:#77b250;font-size:40px;}


/* ================================== Repairs & Services Page Begins ============================================ */
/* =========== Repairs & Services BG ============= */
.repair-bg{background: url('./pictures/services/repair-bg.jpg') no-repeat center; background-size:cover;background-color:#fff;width:100%;height:600px;margin:0 auto;padding:0;}
.repair-caption{top:45%;}
.repair-caption h1{font-family:Raleway;color:#64CCFF;}
.repair-end{color:#e3e3e3;}
/* ======== BREADCRUMBS ========== */
ul.repair-crumb {list-style:none;color:#64CCFF;background-color:transparent;}
ul.repair-crumb li {font-size: 16px;}
ul.repair-crumb li+li:before {color: #fff; content: "|\00a0";}
ul.repair-crumb li a{ color: #fff;}
ul.repair-crumb li a:hover {color:#64CCFF;text-decoration:underline;}
/* ===== Maintenance & Repair ====== */
.maintain-repair h4{font-family:Raleway;color:#56c6ff;}
.maintain-repair p{font-size:16px;color:#777;}
/* ===== Maintenance & Repair 3 sections ====== */
.three-services-title h6{font-family:Poppins;color:#666;}
.three-services{background-color:#fafafa;border-radius:20px 20px;}
.fa-rs{font-size:35px;color:#222;}
.three-services p{font-family:Poppins;font-size:14px;color:#666;line-height:1.6em;}
/* ===== Technician Text ====== */
.tech-service p{font-family:Roboto;font-size:20px;line-height:1.8em;color:#ccc;}
/* === HVAC Sales & SERVICES ==== */
.hvac-sales-title h4{font-family:Poppins;color:#56c6ff;}
.hvac-sales{background-color:#fbfbfb;border:5px solid transparent;}
.hvac-sales:hover{background-color:#fff;animation: service-border 3s alternate infinite;border-radius:2%;box-shadow:1px 1px 10px 2px #ccc;}
@keyframes service-border{0%{border-top:5px solid red; }50%{border-right:5px solid green;}75%{border-bottom:5px solid orange;border-right:5px solid green;border-left:5px solid brown;}100%{border:5px solid #56c6ff;}}
@-webkit-keyframes service-border{0%{border-top:5px solid red; }50%{border-right:5px solid green;}75%{border-bottom:5px solid orange;border-right:5px solid green;border-left:5px solid brown;}100%{border:5px solid #56c6ff;}}
.hvac-sales .hvac-nums{font-family:Poppins;font-size:50px;color:#192841;}
.hvac-sales h6{font-family:Raleway;color:#000;}
.hvac-sales p{font-size:15px;color:#000;line-height:1.5em;}

/* ======================================= AMC Page Begins =========================================================== */
.amc-bg{background: url('./pictures/services/amcbg.jpg') no-repeat center; background-size:cover;background-color:#fff;width:100%;height:600px;margin:0 auto;padding:0;}
.amc-caption{top:35%;}
.amc-caption h1{font-family:Raleway;color:#f7f9fb;}
.amc-head{color:orange;}
/* ======== BREADCRUMBS ========== */
ul.amc-crumb {list-style:none;color:orange;background-color:transparent;}
ul.amc-crumb li {font-size: 16px;}
ul.amc-crumb li+li:before {color: #fff; content: "|\00a0";}
ul.amc-crumb li a{ color: #fff;}
ul.amc-crumb li a:hover {color:orange;text-decoration:underline;}
/* ===== AMC TYPES ========== */
.amc-types-inner{border:3px solid orange;background:#fcfcfc;animation:border 3s ease infinite;}
@keyframes border{0%{border:3px solid #000}50%{border:3px solid orange}100%{border:3px solid #000}}
.amc-types-item{margin:50px -70px 50px 70px; background-color:orange;animation:translate 6s ease infinite running;}
@keyframes translate{0%{transform:translateX(0);background-color:#000;}50%{transform:translateX(-40%);background-color:orange;}100%{transform:translateX(0%);background-color:orange;}}
.amc-types-item:hover{animation-play-state:paused;}
.amc-types-item h4{font-family:Raleway; color:#eee;}
.amc-types-item p{font-family:Raleway;font-size:16px; color:#f7f9fb;}
.amc-text p{font-family:Roboto;font-size:25px;color:#a1a1a1; letter-spacing:.5px; line-height:1.5em;}
.amc-aes{color:#000;}
/* ===== AMC BENEFITS ========== */
.amc-benefits-title{background-color:transparent;color:#000;}
.amc-benefits-title h3{font-family:Raleway;color:orange;letter-spacing:.5px;}
.amc-lt,.amc-gt{color:#666;}
.amc-benefits-container{background-image: linear-gradient(to right bottom, #fbfbfb, #fbfbfc, #fafcfd, #f9fcfe, #f8fdff);}
.amc-benefits-1,.amc-benefits-2,.amc-benefits-3,.amc-benefits-4,.amc-benefits-5,.amc-benefits-6{background-color:#fcfcfc;color:#000;border-radius:40px 40px;border-left:10px solid orange; }
.amc-benefits-1:hover .fa-benefits,.amc-benefits-2:hover .fa-benefits,.amc-benefits-3:hover .fa-benefits,.amc-benefits-4:hover .fa-benefits,.amc-benefits-5:hover .fa-benefits,.amc-benefits-6:hover .fa-benefits{animation:amc 2s ease-in-out infinite;}
@keyframes amc{from{background-color:#fcfcfc;color:orange;}to{background-color:orange;color:#fff;}}
.fa-benefits{font-size:20px;font-family:Raleway;background-color:#fcfcfc;color:orange;border-radius:50%; border-left:1px solid orange;border-bottom:1px solid orange;margin-left:-8px;}
.amc-benefits-text p{font-family:Roboto;font-size:15.5px;color:#444444;}
/* ===== Note ========== */
.note-bg{background-color:#000;}
.note h4{font-family:Raleway;color:orange;letter-spacing:3px;}
.note p{font-family:Roboto;font-size:16px;color:#ccc;}
/* ===== Protection Agreements ========== */
.amc-agreement-text h3{font-family:Raleway;color:orange;}
.amc-agreement-text  p{font-family:Roboto;font-size:16px;color:#888;}
.amc-aes2{font-size:17px;color:#000;}

/* ============================== Quality Page Begins ============================================== */
.qualityMain{width:100%;height:auto;margin:0;padding:0;display:block;} 
.qualityHead h3{font-family:Raleway;color:#444;letter-spacing:1px;font-weight:500;} 
.qualityHead p{font-family:Roboto;font-size:15px;font-weight:normal;color:#444;}



/* ================================================================== MEDIA QUERIES BEGINS =======================================================================  */

/* =======  @media (min-width: 1200px) and (max-width: 1440px) BEGINS =========  */
@media (min-width:1200px) and (max-width: 1440px){
.col-1 {width: 8.33%;}.col-2 {width: 16.66%;}.col-3 {width: 25%;}.col-4 {width: 33.33%;}.col-5 {width: 41.66%;}.col-6 {width: 50%;}.col-7 {width: 58.33%;}.col-8 {width: 66.66%;}.col-9 {width: 75%;}.col-10 {width: 83.33%;}.col-11 {width: 91.66%;}.col-12 {width: 100%;}
}


/* ======  @media (min-width: 992px) and (max-width: 1199px) BEGINS ========  */
@media (min-width: 992px) and (max-width: 1199px) {
.col-1 {width: 8.33%;}.col-2 {width: 16.66%;}.col-3 {width: 25%;}.col-4 {width: 33.33%;}.col-5 {width: 41.66%;}.col-6 {width: 50%;}.col-7 {width: 58.33%;}.col-8 {width: 66.66%;}.col-9 {width: 75%;}.col-10 {width: 83.33%;}.col-11 {width: 91.66%;}.col-12 {width: 100%;}
.amc-agreement-text h3{font-size:22px;}  /* === AMC PAGE === */
}

/* ======== @media screen and (max-width: 991px) BEGINS =========  */
@media only screen and (max-width: 991px){
  [class*="col-"] { width: 100%;}

/* === SERVICES PAGE BEGINS === */
.services-page-caption{top:48%;} 	/* === Services bg === */

/* === Design & Drafting Page === */
.dd-caption h1{font-size:26px;}
.dd-caption{top:50%;}
.ddMain{border:none !important;}  
.ddHead h4{font-size:20px;}

/* === Installations Page === */
.install-caption{top:45%;}
.install-caption h1{font-size:28px;}
.install-pro h3{font-size:24px;}
.our-moto p,.fa-moto{font-size:24px;} 

 /* === Repairs & Services Page === */
.repair-caption h1{font-size:26px;}
.repair-caption{top:50%;}
.three-services{border-radius:0;}
.tech-service p{font-size:16px;}
.hvac-sales .hvac-nums{font-size:40px;}
 
 /* === AMC Page === */
.amc-caption h1{font-size:26px;}
.amc-caption{top:50%;}
.amc-types-item h4{font-size:20px;}
.amc-text p{font-size:19px;}
.amc-benefits-title h3,.note h4,.amc-agreement-text h3{font-size:22px;}

/* === Quality Policy Page === */
.qualityMain{margin-top:150px;}

}

/* ===== @media  (min-width: 768px) and (max-width:991px) BEGINS ======  */
@media (min-width: 768px) and (max-width:991px){
	[class*="col-"] { width: 100%;}
}

/* ==== @media only screen and (max-width: 767px) BEGINS =====  */
@media only screen and (max-width: 767px){
[class*="col-"] { width: 100%;}

/* === Design & Drafting Page === */
.dd-caption h1{font-size:25px;}
.dd-caption{top:46%;}
.ddMain{border:none !important;}  
.fa-dd:hover{transition:none;}

/* === Installations Page === */
.install-caption{top:50%;}
.install-caption h1{font-size:25px;}
.installP{margin-top:0;}
.about-install p{font-size:16px;}
.install-pro h3{font-size:22px;}
.install-pro p,.install-steps p,.text-section p{font-size:15px;}
.our-moto p,.fa-moto{font-size:22px;}

 /* === Repairs & Services Page === */
.repair-caption h1{font-size:25px;}


/* === AMC Page === */
.amc-caption h1{font-size:25px;}
.amc-caption{top:48%;}
.amc-text p{font-size:18px;}
.amc-benefits-title h3,.note h4,.amc-agreement-text h3{font-size:20px;}

/* === Quality Policy Page === */
.qualityMain{margin-top:140px;}
.qualityHead h3 {font-size:1em;}
.qualityHead p{letter-spacing:.2px;}  
}


/* === @media (max-width: 575px) BEGINS ====  */
@media (max-width: 575px){ 
[class*="col-"]{ width: 100%;}

/* ==== SERVICES PAGE BEGINS ==== */
.dd-main img{border:5px solid gold;border-bottom:none;}
.dd-sub-text{margin:0;border-top:none;} 
.dd-sub-text a{margin-top:0;}

 /* === Design & Drafting Page === */
.ddMain{border:none !important;}  
.ddHead h4{font-size:18px;}.fa-dd{font-size:35px;}.fa-dd:hover{transition:none;}

/* === Installations Page === */
.aboutInstall h3,.title-text{font-size:18px;}
.aboutInstall p{font-size:14px;}
.proInstall p{font-size:14px;}
.moto{letter-spacing:.5px;font-size:16px;}  


/* === Quality Policy Page === */
.qualityMain{margin-top:140px;}
.qualityHead h3 {font-size:1em;}
.qualityHead p{letter-spacing:.2px;}   

}